import { App } from "vue"

export function draggable(app:App){
  app.directive('drag', {
      mounted(el:HTMLElement) {
          el.style.cursor = 'move'
          el.addEventListener('mousedown', (e) => {
              el.style.position = 'fixed'
              let { width, height } = el.getBoundingClientRect()
              console.log(width, height)
              let left = el.offsetLeft
              let top = el.offsetTop
              let mouseX = e.clientX
              let mouseY = e.clientY
              document.onmousemove = (e) => {
                  let disX = e.clientX - mouseX
                  let disY = e.clientY - mouseY
                  el.style.left = (left + disX)+ 'px'
                  el.style.top = (top + disY)+ 'px'
                  return false // 防止选中文本，文本拖动的问题
              }
              // 监听鼠标抬起
              document.onmouseup = () => {
                  document.onmousemove = null;
                  document.onmouseup = null;
              }
          })
      }
  })
}